import "./index.scss";
import {
  Tabs,
  Space,
  Table,
  Button,
  Form,
  Input,
  DatePicker,
  message,
  Modal,
} from "antd";
import TextArea from "antd/es/input/TextArea";
import type { ColumnsType } from "antd/es/table";
import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import http from "../../../utils/http";
import { CSVLink } from "react-csv";
import "dayjs/locale/zh-cn";
import locale from "antd/es/date-picker/locale/zh_CN";

const NewCourse = () => {
  //时间转换
  const toDub = (n: any) => (n < 10 ? "0" + n : "" + n);
  //年月日时分秒
  const toTime = (date: any) => {
    const oTime = new Date(date);
    return (
      oTime.getFullYear() +
      "-" +
      toDub(oTime.getMonth() + 1) +
      "-" +
      toDub(oTime.getDate()) +
      " " +
      toDub(oTime.getHours()) +
      ":" +
      toDub(oTime.getMinutes()) +
      ":" +
      toDub(oTime.getSeconds())
    );
  };
  //年月日
  const toDate = (date: any) => {
    const oDate = new Date(date);
    return (
      oDate.getFullYear() +
      "-" +
      toDub(oDate.getMonth() + 1) +
      "-" +
      toDub(oDate.getDate())
    );
  };

  //状态的切换
  const onChange = (key: string) => {
    console.log(key);
  };

  //待审核表信息
  const [data, setData] = useState([]);
  interface DataType {
    key: string;
    ocourse: String;
    oname: String;
    orange: String;
    oform: String;
    ostand: String;
    otime: String;
  }
  const columns: ColumnsType<DataType> = [
    {
      title: "所有课程",
      dataIndex: "ocourse",
      key: "ocourse",
      render: (text, record) => (
        <a
          onClick={() => {
            toDetail1(record);
          }}
          className="ocourse"
        >
          {text}
        </a>
      ),
    },
    {
      title: "所属机构",
      dataIndex: "oname",
      key: "oname",
    },
    {
      title: "招生范围",
      dataIndex: "orange",
      key: "orange",
    },
    {
      title: "上课时间",
      dataIndex: "oform",
      key: "oform",
    },
    {
      title: "收费标准",
      dataIndex: "ostand",
      key: "ostand",
    },
    {
      title: "提交时间",
      dataIndex: "otime",
      key: "otime",
      render: (text) => <a className="todate">{toTime(text)}</a>,
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <a
            onClick={() => {
              showPass(record);
            }}
            className="pass"
          >
            通过
          </a>
          <a
            onClick={() => {
              showNoPass(record);
            }}
            className="nopass"
          >
            不通过
          </a>
        </Space>
      ),
      width: 150,
    },
  ];

  //待审核跳转详情
  const navigate = useNavigate();
  const toDetail1 = (record: any) => {
    navigate(`/home/courseDetail1`, { state: record });
  };
  // 渲染课程待审核数据
  const getData = () => {
    http({
      url: "/getCourseOne",
    }).then((res) => {
      console.log("所有数据", res);

      let _data = res.data.map((v: { id: number }) => {
        return { ...v, key: v.id };
      });
      setData(_data);
    });
  };
  useEffect(() => {
    getData();
  }, []);

  //待审核搜索的表单
  const [searchText1] = Form.useForm();
  //待审核搜索
  const onSearch1 = (search: any) => {
    http({
      url: "/searchCourseOne",
      params: {
        oname: search.oname || "",
        orange: search.orange || "",
        oform: search.oform || "",
        otime:
          toDate(search.otime) == "NaN-NaN-NaN"
            ? ""
            : toDate(search.otime) || "",
      },
    }).then((res: { [key: string]: any }) => {
      if (res.error == 0) {
        message.success("查询成功");
        let _data = res.data.map((v: { id: number }) => {
          return { ...v, key: v.id };
        });
        setData(_data);
      } else {
        message.error("查询失败");
      }
    });
  };
  //待审核清空搜索
  const clear1 = () => {
    searchText1.resetFields();
    getData();
  };

  // 不通过
  const [isModalOpenNoPass, setIsModalOpenNoPass] = useState(false);
  const [noPassForm] = Form.useForm();
  const showNoPass = (record: any) => {
    noPassForm.setFieldsValue({ ...record });
    setIsModalOpenNoPass(true);
  };
  const handleOkNoPass = () => {
    const data = noPassForm.getFieldsValue(true);
    http({
      url: "/noPassCourseOne",
      method: "post",
      data: {
        id: data.id,
        ocwhy: data.ocwhy,
      },
    }).then((res: { [key: string]: any }) => {
      if (res.error == 0) {
        message.success("未通过成功");
        setIsModalOpenNoPass(false);
        getData();
        getData1();
        getData2();
      } else {
        message.error("未通过失败");
      }
    });
  };
  const handleCancelNoPass = () => {
    setIsModalOpenNoPass(false);
  };

  // 通过
  const [isModalOpenPass, setIsModalOpenPass] = useState(false);
  const [passForm] = Form.useForm();
  const showPass = (record: any) => {
    passForm.setFieldsValue({ ...record });
    setIsModalOpenPass(true);
  };
  const handleOkPass = () => {
    const data = passForm.getFieldsValue(true);
    http({
      url: "/passCourseOne",
      method: "post",
      data: {
        id: data.id,
      },
    }).then((res: { [key: string]: any }) => {
      if (res.error == 0) {
        message.success("通过成功");
        getData();
        getData1();
        setIsModalOpenPass(false);
      } else {
        message.error("通过失败");
      }
    });
  };
  const handleCancelPass = () => {
    setIsModalOpenPass(false);
  };

  //待审批表内容
  const [data1, setData1] = useState([]);
  const columns1: ColumnsType<DataType> = [
    {
      title: "所有课程",
      dataIndex: "ocourse",
      key: "ocourse",
      render: (text, record) => (
        <a
          onClick={() => {
            toDetail2(record);
          }}
          className="ocourse"
        >
          {text}
        </a>
      ),
    },
    {
      title: "所属机构",
      dataIndex: "oname",
      key: "oname",
    },
    {
      title: "招生范围",
      dataIndex: "orange",
      key: "orange",
    },
    {
      title: "上课时间",
      dataIndex: "oform",
      key: "oform",
    },
    {
      title: "收费标准",
      dataIndex: "ostand",
      key: "ostand",
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <a
            onClick={() => {
              showPass1(record);
            }}
            className="pass"
          >
            通过
          </a>
          <a
            onClick={() => {
              showNoPass1(record);
            }}
            className="nopass"
          >
            不通过
          </a>
        </Space>
      ),
      width: 150,
    },
  ];
  //待审批跳转详情
  const toDetail2 = (record: any) => {
    navigate(`/home/courseDetail2`, { state: record });
  };
  // 渲染课程待审批数据
  const getData1 = () => {
    http({
      url: "/getCourseTwo",
    }).then((res) => {
      console.log("所有数据", res);
      let _data = res.data.map((v: { id: number }) => {
        return { ...v, key: v.id };
      });
      setData1(_data);
    });
  };
  useEffect(() => {
    getData1();
  }, []);
  //待审批搜索的表单
  const [searchText2] = Form.useForm();
  //待审批搜索
  const onSearch2 = (search: any) => {
    http({
      url: "/searchCourseTwo",
      params: {
        oname: search.oname || "",
        orange: search.orange || "",
        oform: search.oform || "",
      },
    }).then((res: { [key: string]: any }) => {
      if (res.error == 0) {
        message.success("查询成功");
        let _data = res.data.map((v: { id: number }) => {
          return { ...v, key: v.id };
        });
        setData1(_data);
      } else {
        message.error("查询失败");
      }
    });
  };
  //待审批清空搜索
  const clear2 = () => {
    searchText2.resetFields();
    getData1();
  };
  // 不通过
  const [isModalOpenNoPass1, setIsModalOpenNoPass1] = useState(false);
  const [noPassForm1] = Form.useForm();
  const showNoPass1 = (record: any) => {
    noPassForm1.setFieldsValue({ ...record });
    setIsModalOpenNoPass1(true);
  };
  const handleOkNoPass1 = () => {
    const data1 = noPassForm1.getFieldsValue(true);
    http({
      url: "/noPassCourseTwo",
      method: "post",
      data: {
        id: data1.id,
        ocwhy: data1.ocwhy,
      },
    }).then((res: { [key: string]: any }) => {
      if (res.error == 0) {
        message.success("不通过成功");
        setIsModalOpenNoPass1(false);
        getData();
        getData1();
        getData2();
        getData3();
      } else {
        message.error("不通过失败");
      }
    });
  };
  const handleCancelNoPass1 = () => {
    setIsModalOpenNoPass1(false);
  };

  // 通过
  const [isModalOpenPass1, setIsModalOpenPass1] = useState(false);
  const [passForm1] = Form.useForm();
  const showPass1 = (record: any) => {
    passForm1.setFieldsValue({ ...record });
    setIsModalOpenPass1(true);
  };
  const handleOkPass1 = () => {
    const data1 = passForm1.getFieldsValue(true);
    http({
      url: "/passCourseTwo",
      method: "post",
      data: {
        id: data1.id,
      },
    }).then((res: { [key: string]: any }) => {
      if (res.error == 0) {
        message.success("通过成功");
        getData();
        getData1();
        getData3();
        setIsModalOpenPass1(false);
      } else {
        message.error("通过失败");
      }
    });
  };
  const handleCancelPass1 = () => {
    setIsModalOpenPass1(false);
  };

  //已通过表内容
  const [data3, setData3] = useState([]);
  const columns3: ColumnsType<DataType> = [
    {
      title: "所有课程",
      dataIndex: "ocourse",
      key: "ocourse",
      render: (text, record) => (
        <a
          onClick={() => {
            toDetail3(record);
          }}
          className="ocourse"
        >
          {text}
        </a>
      ),
    },
    {
      title: "所属机构",
      dataIndex: "oname",
      key: "oname",
    },
    {
      title: "招生范围",
      dataIndex: "orange",
      key: "orange",
    },
    {
      title: "上课时间",
      dataIndex: "oform",
      key: "oform",
    },
    {
      title: "收费标准",
      dataIndex: "ostand",
      key: "ostand",
    },
    {
      title: "通过时间",
      dataIndex: "ocpasstime",
      key: "ocpasstime",
      render: (text) => <a className="todate">{toTime(text)}</a>,
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <a
            onClick={() => {
              showEdit(record);
            }}
            className="del"
          >
            编辑
          </a>
        </Space>
      ),
    },
  ];
  //已通过跳转详情
  const toDetail3 = (record: any) => {
    navigate(`/home/courseDetail3`, { state: record });
  };
  // 渲染课程已通过数据
  const getData3 = () => {
    http({
      url: "/getCourseThree",
    }).then((res) => {
      console.log("所有数据1111", res);
      let _data = res.data.map((v: { id: number }) => {
        return { ...v, key: v.id };
      });
      setData3(_data);
    });
  };
  useEffect(() => {
    getData3();
  }, []);
  //已通过搜索的表单
  const [searchText3] = Form.useForm();
  //已通过搜索
  const onSearch3 = (search: any) => {
    http({
      url: "/searchCourseThree",
      params: {
        oname: search.oname || "",
        orange: search.orange || "",
        oform: search.oform || "",
        ocpasstime:
          toDate(search.ocpasstime) == "NaN-NaN-NaN"
            ? ""
            : toDate(search.ocpasstime) || "",
      },
    }).then((res: { [key: string]: any }) => {
      if (res.error == 0) {
        message.success("查询成功");
        console.log(res);

        let _data = res.data.map((v: { id: number }) => {
          return { ...v, key: v.id };
        });
        setData3(_data);
      } else {
        message.error("查询失败");
      }
    });
  };
  //已通过清空搜索
  const clear3 = () => {
    searchText3.resetFields();
    getData3();
  };
  // 编辑框
  const [editForm] = Form.useForm();
  const [isModalOpen, setIsEditOpen] = useState(false);

  const showEdit = (record: any) => {
    console.log("editrecord", record);
    editForm.setFieldsValue({ ...record });
    setIsEditOpen(true);
  };
  // 确定编辑
  const handleOk = () => {
    const data = editForm.getFieldsValue(true);
    http({
      url: "/editCourse",
      method: "post",
      data: data,
    }).then((res: { [key: string]: any }) => {
      console.log(res);
      if (res.error == 0) {
        message.success("修改成功");
        setIsEditOpen(false);
        getData3();
      } else {
        message.error("修改失败");
      }
    });
    setIsEditOpen(false);
  };
  const handleCancel = () => {
    setIsEditOpen(false);
  };

  //未通过表内容
  const [data2, setData2] = useState([]);
  const columns2: ColumnsType<DataType> = [
    {
      title: "所有课程",
      dataIndex: "ocourse",
      key: "ocourse",
      render: (text, record) => (
        <a
          onClick={() => {
            toDetail4(record);
          }}
          className="ocourse"
        >
          {text}
        </a>
      ),
    },
    {
      title: "所属机构",
      dataIndex: "oname",
      key: "oname",
    },
    {
      title: "招生范围",
      dataIndex: "orange",
      key: "orange",
    },
    {
      title: "上课时间",
      dataIndex: "oform",
      key: "oform",
    },
    {
      title: "收费标准",
      dataIndex: "ostand",
      key: "ostand",
    },
    {
      title: "原因",
      dataIndex: "ocwhy",
      key: "ocwhy",
    },
    {
      title: "未通过时间",
      dataIndex: "ocnotime",
      key: "ocnotime",
      render: (text) => <a className="todate">{toTime(text)}</a>,
    },
  ];
  //未通过跳转详情
  const toDetail4 = (record: any) => {
    navigate(`/home/courseDetail4`, { state: record });
  };
  // 渲染课程未通过数据
  const getData2 = () => {
    http({
      url: "/getCourseFour",
    }).then((res) => {
      console.log("所有数据", res);
      let _data = res.data.map((v: { id: number }) => {
        return { ...v, key: v.id };
      });
      setData2(_data);
    });
  };
  useEffect(() => {
    getData2();
  }, []);
  //未通过搜索的表单
  const [searchText4] = Form.useForm();
  //未通过搜索
  const onSearch4 = (search: any) => {
    http({
      url: "/searchCourseFour",
      params: {
        oname: search.oname || "",
        orange: search.orange || "",
        oform: search.oform || "",
        ocwhy: search.ocwhy || "",
        ocnotime:
          toDate(search.ocnotime) == "NaN-NaN-NaN"
            ? ""
            : toDate(search.ocnotime) || "",
      },
    }).then((res: { [key: string]: any }) => {
      if (res.error == 0) {
        message.success("查询成功");
        let _data = res.data.map((v: { id: number }) => {
          return { ...v, key: v.id };
        });
        setData2(_data);
      } else {
        message.error("查询失败");
      }
    });
  };
  //未通过清空搜索
  const clear4 = () => {
    searchText4.resetFields();
    getData2();
  };

  return (
    <div className="NewCourse">
      <div className="title">新课程审批</div>
      <div className="hr"></div>

      <Tabs
        defaultActiveKey="1"
        onChange={onChange}
        items={[
          {
            label: `待审核`,
            key: "1",
            children: (
              <>
                <Form
                  className="boxBig"
                  name="customized_form_controls"
                  layout="inline"
                  onFinish={onSearch1}
                  form={searchText1}
                >
                  <Form.Item name="oname" label="所属机构">
                    <Input />
                  </Form.Item>

                  <Form.Item name="orange" label="招生范围">
                    <Input />
                  </Form.Item>

                  <Form.Item name="oform" label="上课时间">
                    <Input />
                  </Form.Item>

                  <Form.Item
                    label="提交时间"
                    className="Box_form_date"
                    name="otime"
                  >
                    <DatePicker locale={locale} placeholder="" />
                  </Form.Item>

                  <Form.Item>
                    <Button className="btn" htmlType="submit">
                      查询
                    </Button>
                  </Form.Item>

                  <Form.Item>
                    <Button className="btn" onClick={clear1}>
                      清空查询
                    </Button>
                  </Form.Item>

                  <Form.Item>
                    <Button className="btn">
                      <CSVLink
                        data={data}
                        filename="新课程审批-待审核导出表.csv"
                      >
                        导出结果
                      </CSVLink>
                    </Button>
                  </Form.Item>
                </Form>

                <Table
                  columns={columns}
                  dataSource={data}
                  bordered={true}
                  pagination={{ defaultPageSize: 5 }}
                />

                {/*不通过框*/}
                <Modal
                  title="不通过"
                  open={isModalOpenNoPass}
                  onOk={handleOkNoPass}
                  onCancel={handleCancelNoPass}
                  okText={"确认"}
                  cancelText={"取消"}
                >
                  <Form
                    form={noPassForm}
                    labelCol={{
                      span: 8,
                    }}
                    wrapperCol={{
                      span: 24,
                    }}
                    autoComplete="off"
                  >
                    <Form.Item name="ocwhy">
                      <TextArea rows={4} placeholder="请输入不同意理由" />
                    </Form.Item>
                  </Form>
                </Modal>

                {/*通过框*/}
                <Modal
                  title="通过"
                  open={isModalOpenPass}
                  onOk={handleOkPass}
                  onCancel={handleCancelPass}
                  okText={"确认"}
                  cancelText={"取消"}
                  className="pass-box"
                >
                  <Form form={passForm}>
                    <div>是否同意该课程通过审核？</div>
                  </Form>
                </Modal>
              </>
            ),
          },
          {
            label: `待审批`,
            key: "2",
            children: (
              <>
                <Form
                  className="boxBig"
                  name="customized_form_controls"
                  layout="inline"
                  onFinish={onSearch2}
                  form={searchText2}
                >
                  <Form.Item name="oname" label="所属机构">
                    <Input />
                  </Form.Item>

                  <Form.Item name="orange" label="招生范围">
                    <Input />
                  </Form.Item>

                  <Form.Item name="oform" label="上课时间">
                    <Input />
                  </Form.Item>

                  <Form.Item>
                    <Button className="btn" htmlType="submit">
                      查询
                    </Button>
                  </Form.Item>

                  <Form.Item>
                    <Button className="btn" onClick={clear2}>
                      清空查询
                    </Button>
                  </Form.Item>

                  <Form.Item>
                    <Button className="btn">
                      <CSVLink
                        data={data1}
                        filename="新课程审批-待审批导出表.csv"
                      >
                        导出结果
                      </CSVLink>
                    </Button>
                  </Form.Item>
                </Form>

                <Table
                  columns={columns1}
                  dataSource={data1}
                  bordered={true}
                  pagination={{ defaultPageSize: 5 }}
                />

                {/*不通过框*/}
                <Modal
                  title="不通过"
                  open={isModalOpenNoPass1}
                  onOk={handleOkNoPass1}
                  onCancel={handleCancelNoPass1}
                  okText={"确认"}
                  cancelText={"取消"}
                >
                  <Form
                    form={noPassForm1}
                    labelCol={{
                      span: 8,
                    }}
                    wrapperCol={{
                      span: 24,
                    }}
                    autoComplete="off"
                  >
                    <Form.Item name="ocwhy">
                      <TextArea rows={4} placeholder="请输入不同意理由" />
                    </Form.Item>
                  </Form>
                </Modal>

                {/*通过框*/}
                <Modal
                  title="通过"
                  open={isModalOpenPass1}
                  onOk={handleOkPass1}
                  onCancel={handleCancelPass1}
                  okText={"确认"}
                  cancelText={"取消"}
                  className="pass-box"
                >
                  <Form form={passForm1}>
                    <div>是否同意该课程通过审批？</div>
                  </Form>
                </Modal>
              </>
            ),
          },
          {
            label: "已通过",
            key: "3",
            children: (
              <>
                <Form
                  className="boxBig"
                  name="customized_form_controls"
                  layout="inline"
                  onFinish={onSearch3}
                  form={searchText3}
                >
                  <Form.Item name="oname" label="所属机构">
                    <Input />
                  </Form.Item>

                  <Form.Item name="orange" label="招生范围">
                    <Input />
                  </Form.Item>

                  <Form.Item name="oform" label="上课时间">
                    <Input />
                  </Form.Item>

                  <Form.Item
                    label="通过时间"
                    className="Box_form_date"
                    name="ocpasstime"
                  >
                    <DatePicker locale={locale} placeholder="" />
                  </Form.Item>

                  <Form.Item>
                    <Button className="btn" htmlType="submit">
                      查询
                    </Button>
                  </Form.Item>

                  <Form.Item>
                    <Button className="btn" onClick={clear3}>
                      清空查询
                    </Button>
                  </Form.Item>

                  <Form.Item>
                    <Button className="btn">
                      <CSVLink
                        data={data3}
                        filename="新课程审批-已通过导出表.csv"
                      >
                        导出结果
                      </CSVLink>
                    </Button>
                  </Form.Item>
                </Form>

                <Table
                  columns={columns3}
                  dataSource={data3}
                  bordered={true}
                  pagination={{ defaultPageSize: 5 }}
                />

                {/* 编辑框 */}
                <Modal
                  title="编辑"
                  open={isModalOpen}
                  onOk={handleOk}
                  onCancel={handleCancel}
                  okText={"确认"}
                  cancelText={"取消"}
                >
                  <Form
                    form={editForm}
                    name="basic"
                    initialValues={{ remember: true }}
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 16 }}
                    autoComplete="off"
                  >
                    <Form.Item
                      label="所有课程"
                      name="ocourse"
                      rules={[
                        {
                          required: true,

                          message: "请输入所有课程名称!",
                        },
                      ]}
                    >
                      <Input />
                    </Form.Item>

                    <Form.Item
                      label="所属机构"
                      rules={[{ required: true, message: "请输入所属机构!" }]}
                      name="oname"
                    >
                      <Input disabled />
                    </Form.Item>

                    <Form.Item
                      label="招生范围"
                      name="orange"
                      rules={[{ required: true, message: "请输入招生范围!" }]}
                    >
                      <Input />
                    </Form.Item>

                    <Form.Item
                      label="上课时间"
                      rules={[
                        {
                          required: true,
                          message: "请输入合理的上课时间!",
                        },
                      ]}
                      name="oform"
                    >
                      <Input />
                    </Form.Item>

                    <Form.Item
                      label="收费标准"
                      rules={[
                        {
                          required: true,
                          message: "请输入合理的收费标准!",
                        },
                      ]}
                      name="ostand"
                    >
                      <Input />
                    </Form.Item>
                  </Form>
                </Modal>
              </>
            ),
          },
          {
            label: "未通过",
            key: "4",
            children: (
              <>
                <Form
                  className="boxBig"
                  name="customized_form_controls"
                  layout="inline"
                  onFinish={onSearch4}
                  form={searchText4}
                >
                  <Form.Item name="oname" label="所属机构">
                    <Input />
                  </Form.Item>

                  <Form.Item name="orange" label="招生范围">
                    <Input />
                  </Form.Item>

                  <Form.Item name="oform" label="上课时间">
                    <Input />
                  </Form.Item>

                  <Form.Item name="ocwhy" label="未通过原因">
                    <Input />
                  </Form.Item>

                  <Form.Item
                    label="未通过时间"
                    className="Box_form_date"
                    name="ocnotime"
                  >
                    <DatePicker locale={locale} placeholder="" />
                  </Form.Item>

                  <Form.Item>
                    <Button className="btn" htmlType="submit">
                      查询
                    </Button>
                  </Form.Item>

                  <Form.Item>
                    <Button className="btn" onClick={clear4}>
                      清空查询
                    </Button>
                  </Form.Item>

                  <Form.Item>
                    <Button className="btn">
                      <CSVLink
                        data={data2}
                        filename="新课程审批-未通过导出表.csv"
                      >
                        导出结果
                      </CSVLink>
                    </Button>
                  </Form.Item>
                </Form>

                <Table
                  columns={columns2}
                  dataSource={data2}
                  bordered={true}
                  pagination={{ defaultPageSize: 5 }}
                />
              </>
            ),
          },
        ]}
      />
    </div>
  );
};
export default NewCourse;
